情境

我們用下面這個垂直下拉選單來說明這個情境：

上圖示我們常見的下拉選單形式，這些選單有一些選項，例如我們可以對這個帳號做一些設定、登出、查看自己的個人資料等等。

你能看見多遠的未來呢？

在上面的選單當中，你是否有嗅到「危險」的味道呢？
我們來看看選單當中的第一個選項，選項是使用者自己的「名字」，用來查看個人的資料。

這個欄位如果會顯示使用者自己的名字的話，那表示，這個欄位很有可能是使用者在註冊帳號的時候自己輸入的吧？

你是不是有想到，如果他的名字很長呢？

那剩下的選項，因為不是使用者輸入的，所以長度應該不太會變動，是固定的內容長度，這樣想很合理吧？

但是你真的確定嗎？

你有沒有想過，如果我們維護的系統需要支援多國語言的切換，那這些詞彙轉換成其他國家語言的時候，內文長度還會一樣嗎？

所以，到目前為止，我們已經大致上理解過長的內容會導致什麼樣的破版意外，並且這樣的意外很可能在什麼情況下發生。

接下來，我們要來討論面對這些不同的情境，我們有哪一些防禦方法。

使用文字斷行(換行)

斷行的方式有許多種，這裡以 word-break 為例。word-break 決定如何斷行「單詞」。所謂的單詞，指的是像英文中的 word 就是一個單詞。

break-all
break-all 是一種斷行效果，如果文字太長，沒辦法裝進容器元素裡，允許文字在任意位置斷行。效果如下：

.menu-item__text {
  word-break: break-all;
}

因為他允許文字在任意位置斷行，所以左右邊界不會留白，看起來比較整齊，但是缺點是單詞會被斷在中間，容易造成閱讀上的不易。

break-word

break-word 的效果是以單詞為單位來斷行，效果如下：

.menu-item__text {
  word-break: break-word;
}

我們可以看到沒有單詞彙被切斷，但是缺點是斷詞處會有留白，排版上面比較不整齊。

還有另一個值得一提的隱藏細節，假設我今天名字真的很長，一行都裝不下，還是有可能單詞彙被斷在中間：

使用文字截斷

假設我們的文字內容並不是全部都很重要，也可以考慮將過長的部分截斷，用「點點點」代替，告訴使用者後面還有更多的內容：

.menu-item__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

保留多行的文字截斷

文字在截斷的時候，也能夠決定保留的行數，透過 line-clamp 屬性能夠幫助我們做到這一點，他能決定截斷的最大行數。以下圖為例，我們最多保留兩行，之後太長的文字以「點點點」取代：

.menu-item__text {
  display: -webkit-box;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

不過使用這個方式會需要特別留意，如果你有為這個文字容器添加 padding，那他尾部被截斷的部分將會露出來，如下圖：

.menu-item__text {
  display: -webkit-box;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding-bottom: 20px; /* 會造成截斷隱藏的部分露出來 */
}

允許水平滾動

有時候斷行或文字截斷並不總是可行的，可能因為某些原因我們會需要保留所有的內容，這時候或許可以考慮允許水平滾動：

小結

今天我們針對過長的內容會造成的意外來進行討論，我們的情境會發生在任何可能的地方，不限定於垂直下拉選單。類似像下面的這種選單，其實我們觀察到每一個選項的保留空間也是很有限的，因此也會特別需要留意內容過長的問題：

本篇也提供一些可能可以參考的解決方案：

• 使用文字斷行(換行)
• 使用文字截斷
• 保留多行的文字截斷
• 允許水平滾動

上面這些方案是可能的參考方案，但不一定適合每一個情境，所以決定要使用哪種方案前會需要團隊的討論。但在討論之前，總不能腦袋空空，身為工程師，我們會需要知道有可能有哪些解法，這樣能夠幫助討論的進行。

[聊天時間]
當我們在建構畫面佈局的時候，考慮文字內容是否會過長而產生異常，這樣的「思考習慣」真的非常重要。
如果我們能夠清楚的知道文字內容過長時應該要怎麼防禦，那我們就很有機會提前防止很多不必要的意外發生。